<template>
  <div>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        />
        <el-table-column
          prop="mark"
          label="项目标识"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.mark">{{ scope.row.mark }}</span>
            <span v-else>/</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="项目名称"
          align="center"
          ><template slot-scope="scope"
            ><span v-if="scope.row.name">{{ scope.row.name }}</span>
            <span v-else>/</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="操作"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="editHandler(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              style="color: red"
              @click="deleteHandler(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
    </el-row>
  </div>
</template>

<script>
import {
  getProjectList,
  projectDetail,
  addProject,
  updateProject,
  deleteProject,
} from '/src/http/productSchedule/projectMg.js'
export default {
  data() {
    return {
      dialogVisible: false,
      projectInput: '',
      renderData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      isSearch: false,
      // edit
      editTiele: '',
      editDialogStatus: false,
      editProjectIdentifyInput: '',
      editProjectInput: '',
    }
  },

  mounted() {
    this.getProjectListApi()
  },

  methods: {
    // 搜索
    searchHandler() {
      this.isSearch = true
      if (this.projectInput === '') {
        this.$message({
          message: '请输入查询条件',
          type: 'warning',
        })
      } else {
        this.getProjectListApi(1, this.pageSize, this.projectInput)
      }
    },
    // 重置
    resetHandler() {
      this.getProjectListApi()
      this.projectInput = ''
      this.isSearch = false
    },
    // 新增
    addHandler() {
      this.editTiele = '新增'
      this.editDialogStatus = true
      this.editProjectIdentifyInput = ''
      this.editProjectInput = ''
    },
    //   编辑
    editHandler(v) {
      this.editTiele = '编辑'
      this.editDialogStatus = true
      this.editProjectIdentifyInput = v.name
      this.editProjectInput = v.mark
    },
    // 删除
    deleteHandler(v) {
      console.log('delete::: ', v)
      this.$confirm('此操作将永久删除该信息?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteProjectApi([v.id])
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 每页几条
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      if (this.isSearch === true) {
        this.getProjectListApi(1, v, this.projectInput)
      } else {
        this.getProjectListApi(1, v)
      }
    },
    // 分页
    handleCurrentChange(v) {
      this.currentPage = v
      if (this.isSearch === true) {
        this.getProjectListApi(v, this.pageSize, this.projectInput)
      } else {
        this.getProjectListApi(v, this.pageSize)
      }
    },
    // editDialog保存
    editSaveHandler() {
      this.editDialogStatus = false
      let params = {
        mark: this.editProjectIdentifyInput,
        name: this.editProjectInput,
      }
      if (this.editTiele == '新增') {
        this.addProjectApi(params)
      } else {
        this.updateProjectApi(params)
      }
    },

    /**接口 */
    // 查询项目列表
    getProjectListApi(pageNum = 1, pageSize = 10, name = '') {
      let params = {
        pageNum,
        pageSize,
        name,
      }
      getProjectList(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records
          this.total = res.data.total
          this.pageSize = res.data.size
        }
      })
    },
    // 项目详情
    projectDetailApi(params) {
      projectDetail(params).then((res) => {
        console.log('res::: ', res)
      })
    },
    // 新增项目
    addProjectApi(params) {
      addProject(params).then((res) => {
        if (res.code == 200) {
          let pgn =
            Number.isInteger(this.total / this.pageSize) == true
              ? this.total / this.pageSize + 1
              : Math.ceil(this.total / this.pageSize)
          this.getProjectListApi(pgn, this.pageSize)
          this.$message.success('新增成功')
        } else {
          this.$message.error('新增失败')
        }
      })
    },
    // 编辑项目
    updateProjectApi(params) {
      updateProject(params).then((res) => {
        if (res.code == 200) {
          this.getProjectListApi(this.currentPage, this.pageSize)
          this.$message.success('编辑成功')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 删除项目
    deleteProjectApi(idList = '') {
      let params = { idList }
      deleteProject(params).then((res) => {
        let pgn =
          Number.isInteger(this.total / this.pageSize) == true
            ? this.total / this.pageSize + 1
            : Math.ceil(this.total / this.pageSize)
        if (res.code == 200 && this.search === true) {
          this.getProjectListApi(pgn, this.pageSize, this.projectInput)
          this.$message.success('删除成功')
        } else if (res.code == 200 && this.search === false) {
          this.getProjectListApi(pgn, this.pageSize)
          this.$message.success('删除成功')
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.el-date-editor {
  margin: 0 10px;
}
.imgBox {
  position: relative;
  top: 0;
  left: 0;
  .uploadImg {
    position: absolute;
    top: 30%;
    left: 30%;
    visibility: hidden;
  }
}
.imgBox:hover .uploadImg {
  visibility: visible;
}
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-dialog__title) {
  color: #fff;
}
// 图片上传
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.pDiv {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-right: 0px;
  border-radius: 4px 0 0 4px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  width: 13.7%;
}
:deep(.pSelect) {
  .el-input__inner {
    border-radius: 0 4px 4px 0;
    width: 107.5%;
  }
  .el-input__suffix {
    right: -5%;
  }
}
.mgb-10 {
  margin-bottom: 10px;
}
</style>
